import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs } from 'antd';
import { connect } from 'umi';
import { settle_type, CommissionType } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from './components/selectModel'
import PopImgShow from '@/components/PopImgShow'
const SettingOpeational = (props, ref) => {
  const { onChange, list = [], title, annotate = '如果配置了主负责和协助负责，当用户通过此商品分享链接注册后，主负责和协助负责为一下配置项，如未配置，则默认为分享的员工' } = props
  const [visible, setVisible] = useState(false)


  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow width={24} url={e}></PopImgShow>;
      },
    },
  ];

  return (
    <Row style={{ marginBottom: 24 }}>
      {title === '主负责' && <div className="createLive-manage-part">
        <div className="createLive-part-title">
          <div className="createLive-title-line"></div>
          <div className="createLive-part-title-word">分配设置  </div>
        </div>
      </div>}
      {title === '主负责' && <Col offset={6} span={18}> <span style={{ color: '#999999', fontSize: 18, paddingBottom: 12 }}>说明：{annotate ? `${annotate}` : ''}</span></Col>}


      <Col offset={6} gutter={[24, 24]}>
        <Button
          onClick={() => {
            setVisible({ show: true, details: list });
          }}
        >
          +添加{title}
        </Button>
      </Col>
      <></>
      {list.length > 0 ? (
        <Col style={{ marginTop: 12 }} offset={6} span={18}>
          <TableDataBlock
            cardProps={{ title }}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            list={list}
          ></TableDataBlock>
        </Col>
      ) : null}
      <SelectModel onChange={(e) => { onChange(e) }} visible={visible} onClose={() => setVisible(false)} title={title}></SelectModel>
    </Row>
  );

};
export default SettingOpeational